<template>
  <div class="content-warp">
    <el-container>
      <el-header>
        <el-row :gutter="20">
          <el-col :span="3">
            <div class="title">
              <span>优惠券第三方介入平台</span>
            </div>
          </el-col>
          <el-col :span="2" :offset="18">
            <div class="user-info">
              <div class="avatar">
                <img src="../assets/imgs/avatar.jpg" class="avatar-img" />
              </div>
              <div class="user-name">{{userInfo.name}}</div>
            </div>
          </el-col>
        </el-row>
      </el-header>
      <el-container>
        <el-aside width="213px">
          <el-menu 
            :default-openeds="['1', '2', '3', '4', '5', '6', '7']"
            default-active='1'
            @open="handleOpen"
            background-color="#001529"
            text-color="#ffffff"
            active-text-color="#cdcdff">
            <el-menu-item index="1">
              <i class="el-icon-setting"></i>
              <span slot="title">首页</span>
            </el-menu-item>
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-setting"></i>
                <span>账号与权限</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="2-1" >账号列表</el-menu-item>
                <el-menu-item index="2-2">功能权限列表</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-setting"></i>
                <span>基础信息维护</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="3-1">商品分类维护</el-menu-item>
                <el-menu-item index="3-2">第三方供应商维护</el-menu-item>
                <el-menu-item index="3-2">适用门店维护</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="4">
              <template slot="title">
                <i class="el-icon-setting"></i>
                <span>商品维护</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="4-1">商品管理</el-menu-item>
                <el-menu-item index="4-2">商品审核</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="5">
              <template slot="title">
                <i class="el-icon-setting"></i>
                <span>订单信息</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="5-1">订单管理</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="6">
              <template slot="title">
                <i class="el-icon-setting"></i>
                <span>统计报表</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="6-1">商品销售统计</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <!-- <parties-add></parties-add> -->
          <!-- <shop-add></shop-add> -->
          <!-- <shop-maintain></shop-maintain> -->
          <!-- <cmdy-management></cmdy-management> -->
          <!-- <cmdy-add></cmdy-add> -->
          <!-- <cmdy-stock></cmdy-stock> -->
          <!-- <cmdy-look></cmdy-look> -->
          <cmdy-audit></cmdy-audit>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import PartiesAdd from './components/msg_maintain/partiesAdd'
import ShopAdd from './components/msg_maintain/shopAdd'
import ShopMaintain from './components/msg_maintain/shopMaintain'
import CmdyManagement from './components/commodity/cmdyManagement'
import CmdyAdd from './components/commodity/cmdyAdd'
import CmdyStock from './components/commodity/cmdyStock'
import CmdyLook from './components/commodity/cmdyLook'
import CmdyAudit from './components/commodity/cmdyAudit'

export default {
  components: {
    PartiesAdd,
    ShopAdd,
    ShopMaintain,
    CmdyManagement,
    CmdyAdd,
    CmdyStock,
    CmdyLook,
    CmdyAudit
  },
  data() {
    return {
      userInfo: {
        avatar: '',
        name: '谁家那小谁'
      }
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    }
  },
};
</script>

<style scoped>
.el-container.is-vertical {
  background-color: #f5f5f5;
}
/* 头部 */
.el-header {
  line-height: 60px;
  min-width: 1200px;
  padding: 0;
  background-color: #fff;
}
.title {
  min-width: 212px;
  text-align: center;
  font-size: 20px;
  font-weight: 1000;
  background-color: #00284d;
  color: #ffffff;
}
.user-info {
  width: 120px;
  display: flex;
  justify-content: space-around;
}
.avatar {
  width: 20px;
  border-radius: 50%;
}
.avatar-img {
  width: 100%;
  cursor: pointer;
}
.user-name {
  cursor: pointer;
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 侧边 */
.el-aside >>> .el-menu-item-group__title {
  padding: 0;
}
.el-menu-item.is-active {
  background-color: #001052 !important;
}

/* 主体 */
.el-main {
  padding: 0;
  margin: 20px;
  background-color: #ffffff;
}
</style>